<template>
  <!--      头部-->
  <Header/>
  <!--      头部END-->
  <div class="home" id="home" name="home">

    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="460px">
        <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
          <img style="width:100%; height:460px;" :src="item.path" alt=""/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->


    <div class="main-box">
      <div class="main">
        <!--      商品展示区域-->
        <!--        种类1-->
        <div class="type1">
          <div class="box-hd">
            <div class="title">萌喵喵尔——猫</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <router-link to>
                    <img src="../assets/image/cat_1.jpg" alt=""/>
                  </router-link>
                </li>
                <li>
                  <router-link to>
                    <img src="../assets/image/cat_2.jpg" alt=""/>
                  </router-link>
                </li>
              </ul>

            </div>
            <div>
              <MyList :list="catList" :isMore="true" :categoryID=1></MyList>
            </div>
          </div>
        </div>
        <!--        种类1END-->
        <!--        种类2-->
        <div class="type2">
          <div class="box-hd">
            <div class="title">迅捷如风——狗</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <router-link to>
                    <img src="../assets/image/dog_1.jpg" alt=""/>
                  </router-link>
                </li>
                <li>
                  <router-link to>
                    <img src="../assets/image/dog_2.jpg" alt=""/>
                  </router-link>
                </li>
              </ul>
            </div>
            <div>
              <MyList :list="dogList" :isMore="true" :categoryID=2></MyList>
            </div>
          </div>
        </div>
        <!--        种类2END-->

      </div>
    </div>


  </div>

</template>

<script>
import MyList from "@/components/MyList";
import Header from "@/components/Header";
export default {

  components:{
    Header,
    MyList
  },
  data() {
    return {
      carousel: [],//轮播图数据
      catList: [],//猫数据
      dogList: [],//狗数据
    };
  },
  created() {
    // 轮播图数据
    this.carousel = [
      {
        carousel_id : 1,
        path : ""
      },
      {
        carousel_id : 2,
        path : ""
      },
      {
        carousel_id : 3,
        path : ""
      },
      {
        carousel_id : 4,
        path : ""
      }
    ]


    this.getPromo("猫","catList");
    this.getPromo("狗","dogList");

  },
  methods:{
  // 获取商品列表
    getPromo(type,list){
      this.$axios
          .get(`${this.$target}/animal/find/type/${type}`)
          .then(res => {
            this[list] = res.data.data;
          })
          .catch(err => {
            return Promise.reject(err);
          });
    }
  }
}
</script>

<style scoped>
@import "../assets/css/index.css";
</style>
